iT邦幫忙

第 12 屆 iThome 鐵人賽
DAY 16
0
影片教學

CSS 實作小品30天系列 第 16 篇

Day16-CSS 滑鼠 hover 卡片時打開卡片的效果

12th鐵人賽
942 瀏覽

  • 分享至 

  • xImage
    •  

主要原理就是利用 transform: rotate 這個 CSS 屬性。

Demo link

Yes


上一篇
Day15-CSS 條紋背景的按鈕
下一篇
Day17-CSS 製作剪紙文字效果
系列文
CSS 實作小品30天 共 31 篇
  1. 27
    Day27-CSS 製作黏黏球效果
  2. 28
    Day28-CSS 手刻緞帶
  3. 29
    Day29-CSS 日夜切換 part1 (完成白天部分，太陽，雲，海浪)
  4. 30
    Day30-CSS 日夜切換 part2 (完成夜晚部分，月亮，星星，魚)
  5. 31
    Day31-所有的作品 Demo 總整理
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
TerryYu
iT邦新手 5 級 ‧ 2020-09-22 20:17:25

看了codepen使用hover經過時會一閃一閃的

看更多先前的回應...收起先前的回應...
harry xie iT邦研究生 1 級 ‧ 2020-09-22 22:43:42 檢舉

對XD，卡片打開時有一瞬間右邊出現卷軸

TerryYu iT邦新手 5 級 ‧ 2020-09-23 00:10:17 檢舉

想了老半天想不出解法...
您有解決方法嗎？

我自己只能改成這樣
https://codepen.io/terry-yu-the-vuer/pen/abNPOEg

harry xie iT邦研究生 1 級 ‧ 2020-09-23 00:31:01 檢舉

你卡片的高度改小一點就可以了，我原本做的稍微大了點

TerryYu iT邦新手 5 級 ‧ 2020-09-23 12:06:14 檢舉

原來如此@@
功力太淺

登入發表回應

我要留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22207 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙